<template>
  <div class="navbar">
    <!-- 菜单 -->
    <el-menu 
    background-color="#545c64" 
    text-color="#fff" 
    :router="true"
    :default-openeds="['/students']" 
    :default-active="$route.path"
    active-text-color="#ffd04b">
       <Menu :menuList="menuNodes"></Menu>
    </el-menu>
</div>
</template>

<script setup lang="ts">
import Menu from './menu/index.vue'
import menuList from "@/config/menuConfig"
import type {MenuData,MenuChildrenData} from "./types/type"
import useUserStore from "@/store/modules/user"
import {useRoute} from "vue-router" 
let useStore = useUserStore()
const $route = useRoute()

const hashAuth = (item:MenuData)=>{
    const {index,isPublic} = item
    const menus = useStore.user?.role.menus
    const username = useStore.user?.username
    if(username === "admin" || isPublic || menus?.indexOf(index)!=-1){
        return true
    }else if(item.children){
        return !!item.children.find(
            (child:MenuChildrenData)=>menus.indexOf(child.index)!=-1
        )
    }else{
        return false
    }
}

let menuNodes:any[] = []
const getMenuNodes = ()=>{
    menuList.forEach((item)=>{
        if(!item.children){
            if(hashAuth(item)){
                menuNodes.push(item)
            }
        }else{
            let tempArr = [];
            item.children.forEach(i=>{
                if(hashAuth(i)){
                    tempArr.push(i)
                }
            })
            let obj = {...item,children:tempArr}
            menuNodes.push(obj)
        }
    })
}
getMenuNodes()
</script>

<style scoped>
.el-menu {
    border: 0;
  }
</style>